{{template "header" .}}
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item"><a href="{{ Url "virtual-machine-list" }}">Virtual Machines</a></li>
  <li class="breadcrumb-item"><a href="{{ Url "virtual-machine-list" }}?node={{ .Vm.NodeId }}">{{ .Vm.NodeId }}</a></li>
  <li class="breadcrumb-item active">{{ .Vm.Id }}</li>
</ol>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-md-7">
              <h1>{{ .Vm.Id }}</h1>
              <div class="media">
                <img src="{{ Static "vmango/img/linux-logo.png" }}" width="100" alt="linux">
                <div class="media-body">
                  <p class="text-muted">
                    Node <a href="{{ Url "node-detail" "id" .Vm.NodeId }}">{{ .Vm.NodeId }}</a><br>
                    Autostart {{ if .Vm.Autostart }}enabled{{ else }}disabled{{ end }}<br>
                    {{ if not .Vm.Graphic.Type.IsNone }}
                    {{ .Vm.Graphic.Type.String | Capitalize }} graphic {{ if .Vm.Graphic.Listen }}on {{ .Vm.Graphic.Listen }}{{ end }}<br>
                    {{ end }}
                    {{ if .Vm.GuestAgent }}Guest agent integration enabled<br>{{ end }}
                    {{ .Vm.Memory.Bytes | HumanizeBytes }} RAM, {{ .Vm.VCpus }} CPU<br>
                    {{ .Vm.Arch }}<br>
                    {{ if .Vm.Cpupin }}
                    Emulator: {{ .Vm.Cpupin.Emulator | JoinUint "," }}<br>
                    {{ range $vcpu, $hostCpuSet := .Vm.Cpupin.Vcpus }}
                    Cpu{{ $vcpu }}:{{ $hostCpuSet | JoinUint "," }}
                    {{ end }}
                    {{ end }}
                  </p>
                </div>
              </div>
            </div>

            <div class="col-md-5 text-right">
              <p>
                {{ if .Vm.IsRunning }}
                  {{ if .Vm.Graphic.Vnc }}
                  <a class="btn btn-primary" target="popup" href=""
                    onclick="window.open('{{ Url "virtual-machine-vnc-show" "id" .Vm.Id "node" .Vm.NodeId }}?autoconnect=1&resize=remote','popup','width=800,height=600'); return false;">VNC</a>
                  {{ end }}
                <a class="btn btn-primary" href="{{ Url "virtual-machine-console-show" "id" .Vm.Id "node" .Vm.NodeId }}">Console</a>
                <a class="btn btn-primary"
                  href="{{ Url "virtual-machine-state-form" "id" .Vm.Id "node" .Vm.NodeId "action" "poweroff" }}">Power Off</a>
                <a class="btn btn-primary"
                  href="{{ Url "virtual-machine-state-form" "id" .Vm.Id "node" .Vm.NodeId "action" "reboot" }}">Reboot</a>
                {{ else }}
                <a class="btn btn-primary" href="{{ Url "virtual-machine-update" "id" .Vm.Id "node" .Vm.NodeId }}">Edit</a>
                <a class="btn btn-primary" href="{{ Url "virtual-machine-state-form" "id" .Vm.Id "node" .Vm.NodeId "action" "start" }}">Power
                  On</a>
                {{ end }}
                <a class="btn btn-danger" href="{{ Url "virtual-machine-delete" "id" .Vm.Id "node" .Vm.NodeId }}">Remove</a>
              </p>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <a class="nav-item nav-link {{ if or (eq .ActiveTab "volumes") (eq .ActiveTab "") }}active{{ end }}" id="nav-volumes-tab" data-toggle="tab" href="#nav-volumes" role="tab" aria-controls="nav-volumes" aria-selected="true">Volumes</a>
                  <a class="nav-item nav-link {{ if eq .ActiveTab "interfaces" }}active{{ end }}" id="nav-interfaces-tab" data-toggle="tab" href="#nav-interfaces" role="tab" aria-controls="nav-interfaces" aria-selected="false">Interfaces</a>
                  {{ if .Vm.Config }}
                  <a class="nav-item nav-link {{ if eq .ActiveTab "keys" }}active{{ end }}" id="keys-tab" data-toggle="tab" href="#keys" role="tab" aria-controls="keys" aria-selected="false">Keys</a>
                  {{ end }}
                </div>
              </nav>
              <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane {{ if or (eq .ActiveTab "volumes") (eq .ActiveTab "") }}active{{ end }}" id="nav-volumes" role="tabpanel" aria-labelledby="nav-volumes-tab">
                  <div class="col-md-12">
                    <table class="table table-borderless table-hover table-sm">
                      <thead>
                        <tr>
                          <th>Type</th>
                          <th>Name</th>
                          <th>Format</th>
                          <th>Bus</th>
                          <th>Size</th>
                        </tr>
                      </thead>
                      <tbody>
                        {{ range .Vm.Volumes }}
                        {{ $volumeInfo := (index $.AttachedVolumes .Path) }}
                        <tr>
                          <td>{{ .DeviceType }}</td>
                          <td>
                            {{ if $volumeInfo }}
                              {{ $volumeInfo.Pool }} / {{ $volumeInfo.Name }} {{ if .Alias }}<span class="text-muted">({{ .Alias }})</span>{{ end }}
                            {{ else }}
                              {{ .Path }} {{ if .Alias }}<span class="text-muted">({{ .Alias }})</span>{{ end }}
                            {{ end }}
                          </td>
                          <td>{{ if $volumeInfo }}{{ $volumeInfo.Format }}{{ end }}</td>
                          <td>{{ .DeviceBus }}</td>
                          <td>{{ if $volumeInfo }}{{ $volumeInfo.Size.Bytes | HumanizeBytes }}{{ end }}</td>
                          <td>
                            <form method="post" action="{{ Url "virtual-machine-detach-volume" "id" $.Vm.Id "node" $.Vm.NodeId }}">{{ CSRFField $.Request }}
                              <input type="hidden" name="Path" value="{{ .Path }}">
                              <button {{ if $.Vm.IsRunning }}disabled="disabled" title="Please stop machine" {{ end }}
                                class="btn btn-light btn-sm" type="submit">Detach</button>
                            </form>
                          </td>
                          <td></td>
                        </tr>
                        {{ end }}
                        <form method="post" action="{{ Url "virtual-machine-attach-disk" "id" .Vm.Id "node" .Vm.NodeId }}">{{ CSRFField $.Request }}
                          <tr>
                            <td>
                              <select required="required" class="form-control form-control-sm" name="DeviceType">
                                {{ range .DeviceTypes }}
                                <option value="{{ . }}">{{ . }}</option>
                                {{ end }}
                              </select>
                            </td>
                            <td>
                              <select required="required" class="form-control form-control-sm" name="VolumePath">
                                {{ range .AvailableVolumes }}
                                <option value="{{ .Path }}">{{ .Pool }} / {{ .Name }}</option>
                                {{ end }}
                              </select>
                            </td>
                            <td colspan="3">
                              <select required="required" class="form-control form-control-sm" name="DeviceBus">
                                {{ range .DeviceBuses }}
                                <option value="{{ . }}">{{ . }}</option>
                                {{ end }}
                              </select>
                            </td>
                            <td>
                              <button {{ if .Vm.IsRunning }}disabled="disabled" title="Please stop machine" {{ end }}
                                class="btn btn-primary btn-sm" type="submit">Attach</button>
                            </td>
                          </tr>
                        </form>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="tab-pane {{ if eq .ActiveTab "interfaces" }}active{{ end }}" id="nav-interfaces" role="tabpanel" aria-labelledby="nav-interfaces-tab">
                  <div class="col-md-12">
                    <table class="table table-borderless table-hover table-sm">
                      <thead>
                        <tr>
                          <th>Network</th>
                          <th>MAC</th>
                          <th>Model</th>
                          <th>IPAddress</th>
                          <th>VLAN</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        {{ range .Vm.Interfaces }}
                        <tr>
                          <td>{{ .NetworkName }}</td>
                          <td>{{ .Mac }}</td>
                          <td>{{ .Model }}</td>
                          <td>
                            {{ range .IpAddressList }}
                              {{ . }}
                            {{ end }}
                          </td>
                          <td>
                            {{ if gt .AccessVlan 0 }}
                              {{ .AccessVlan }}
                            {{ end }}
                          </td>
                          <td>
                            <form method="post" action="{{ Url "virtual-machine-detach-interface" "id" $.Vm.Id "node" $.Vm.NodeId }}">
                              {{ CSRFField $.Request }}
                              <input type="hidden" name="Mac" value="{{ .Mac }}">
                              <button {{ if $.Vm.IsRunning }}disabled="disabled" title="Please stop machine" {{ end }}
                                class="btn btn-light btn-sm" type="submit">Detach</button>
                            </form>
                          </td>
                        </tr>
                        {{ end }}
                        <form method="post" action="{{ Url "virtual-machine-attach-interface" "id" .Vm.Id "node" .Vm.NodeId }}">{{ CSRFField $.Request }}
                          <tr>
                            <td>
                              <select required="required" class="form-control form-control-sm" name="Network">
                                {{ range .Networks }}
                                <option value="{{ .Name }}">{{ .Name }}</option>
                                {{ end }}
                              </select>
                            </td>
                            <td>
                              <input class="form-control form-control-sm" type="text" name="Mac" id="Mac" placeholder="00:00:00:00:00:00">
                            </td>
                            <td>
                              <select required="required" class="form-control form-control-sm" name="Model">
                                {{ range .InterfaceModels }}
                                <option value="{{ . }}">{{ . }}</option>
                                {{ end }}
                              </select>
                            </td>
                            <td></td>
                            <td>
                              <input class="form-control form-control-sm" type="number" min="0" max="4096" name="AccessVlan" id="AccessVlan">
                            </td>
                            <td>
                              <button {{ if .Vm.IsRunning }}disabled="disabled" title="Please stop machine" {{ end }}
                                class="btn btn-primary btn-sm" type="submit">Attach</button>
                            </td>
                          </tr>
                        </form>
                      </tbody>
                    </table>
                  </div>
                </div>
                {{ if .Vm.Config }}
                <div class="tab-pane {{ if eq .ActiveTab "keys" }}active{{ end }}" id="keys" role="tabpanel" aria-labelledby="keys-tab">
                  <div class="col-md-12">
                    <table class="table table-borderless table-hover table-sm">
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>Fingerprint</th>
                        </tr>
                      </thead>
                      <tbody>
                        {{ range .Vm.Config.Keys }}
                        <tr>
                          <td>{{ .Comment }}</td>
                          <td>{{ .Fingerprint }}</td>
                        </tr>
                        {{ end }}
                      </tbody>
                    </table>
                  </div>
                </div>
                {{ end }}
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  {{template "footer" .}}
